import Link from "next/link";
import { notFound } from "next/navigation";
import { ArrowLeft, ArrowRight, KeyRound } from "lucide-react";
import { PLAN_LIMITS, normalizePlan } from "@fetcha/core";
import { getWorkspace } from "@/lib/session";
import { getOrgProject, listApiKeys, monthlyUsage } from "@/lib/queries/account";
import { formatDate, formatDateOnly, formatNumber, formatPercent, formatUsd, timeAgo } from "@/lib/format";
import { maskedKey } from "@/lib/account-snippets";
import { PageHeader, SectionTitle } from "@/components/ui/page-header";
import { Badge, StatusBadge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Stat, StatGrid } from "@/components/ui/stat";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { EmptyState } from "@/components/ui/empty-state";
import { Alert } from "@/components/ui/alert";
import { ProjectForm } from "@/components/dashboard/projects/project-form";
import { ArchiveProjectButton, SelectProjectButton } from "@/components/dashboard/projects/project-actions";
import { CreateKeyDialog } from "@/components/dashboard/api-keys/create-key-dialog";

export const dynamic = "force-dynamic";

export default async function ProjectDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const ws = await getWorkspace();
  const project = await getOrgProject(ws.organization.id, id);
  if (!project) notFound();

  const [usage, keys] = await Promise.all([monthlyUsage(ws.organization.id, project.id), listApiKeys(ws.organization.id, project.id)]);
  const activeKeys = keys.filter((k) => k.status === "active");
  const current = ws.project.id === project.id;
  const archived = Boolean(project.archivedAt);
  const planLimits = PLAN_LIMITS[normalizePlan(ws.organization.plan)];
  const requestCap = project.monthlyRequestLimit ?? planLimits.monthly_requests;
  const requestPct = requestCap > 0 && requestCap < Number.MAX_SAFE_INTEGER ? Math.min(100, (usage.requests / requestCap) * 100) : null;
  const spendPct = project.hardLimitUsd ? Math.min(100, (usage.spendUsd / project.hardLimitUsd) * 100) : null;

  return (
    <div className="grid gap-6">
      <div>
        <Link href="/dashboard/projects" className="inline-flex items-center gap-1 text-[12.5px] text-fg-muted underline-offset-4 hover:text-fg hover:underline">
          <ArrowLeft className="size-3.5" /> All projects
        </Link>
      </div>
      <PageHeader
        eyebrow={<span className="font-mono normal-case tracking-normal">{project.id}</span>}
        title={
          <span className="flex flex-wrap items-center gap-2">
            {project.name}
            <Badge variant={project.environment === "production" ? "success" : "warning"}>{project.environment}</Badge>
            {current ? (
              <Badge variant="accent" dot>
                Current
              </Badge>
            ) : null}
            {archived ? <StatusBadge status="archived" /> : null}
          </span>
        }
        description={project.description || `Created ${formatDate(project.createdAt)}.`}
        actions={
          <>
            {!current && !archived ? (
              <SelectProjectButton projectId={project.id} size="sm">
                Make current
              </SelectProjectButton>
            ) : null}
            <Button asChild size="sm" variant="outline">
              <Link href={`/dashboard/api-keys?project=${project.id}`}>
                <KeyRound /> API keys
              </Link>
            </Button>
          </>
        }
      />

      {archived ? <Alert variant="warning" title="This project is archived">Its keys no longer authenticate and it is hidden from the project switcher. Contact support@fetcha.co to restore it.</Alert> : null}

      <StatGrid cols={4}>
        <Stat label="Requests this month" value={formatNumber(usage.requests)} hint={requestPct !== null ? `${formatPercent(requestPct, 0)} of ${formatNumber(requestCap)}` : "no cap"} />
        <Stat label="Spend this month" value={formatUsd(usage.spendUsd)} hint={project.hardLimitUsd ? `hard limit ${formatUsd(project.hardLimitUsd)}` : "no hard limit"} />
        <Stat label="Active keys" value={formatNumber(activeKeys.length)} hint={`${keys.length - activeKeys.length} inactive`} />
        <Stat label="Created" value={formatDateOnly(project.createdAt)} mono={false} hint={`updated ${timeAgo(project.updatedAt)}`} />
      </StatGrid>

      <div className="grid gap-6 lg:grid-cols-[1fr_320px]">
        <div className="grid gap-6">
          <Card>
            <CardHeader>
              <CardTitle>Project settings</CardTitle>
              <CardDescription>Defaults apply to requests that omit the field. Limits are enforced per calendar month.</CardDescription>
            </CardHeader>
            <CardContent>
              <ProjectForm
                mode="edit"
                projectId={project.id}
                initial={{
                  name: project.name,
                  description: project.description,
                  environment: project.environment,
                  defaultCountry: project.defaultCountry,
                  defaultNetwork: project.defaultNetwork,
                  logLevel: project.logLevel,
                  softLimitUsd: project.softLimitUsd,
                  hardLimitUsd: project.hardLimitUsd,
                  monthlyRequestLimit: project.monthlyRequestLimit,
                }}
              />
            </CardContent>
          </Card>

          <section>
            <SectionTitle
              right={
                <Link href={`/dashboard/api-keys?project=${project.id}`} className="inline-flex items-center gap-1 text-[12.5px] text-fg-muted underline-offset-4 hover:text-fg hover:underline">
                  Manage keys <ArrowRight className="size-3.5" />
                </Link>
              }
            >
              API keys · {keys.length}
            </SectionTitle>
            {keys.length === 0 ? (
              <EmptyState
                compact
                icon={KeyRound}
                title="No keys for this project"
                description="Generate a key to call the API on behalf of this project."
                action={!archived ? <CreateKeyDialog projects={[{ id: project.id, name: project.name, environment: project.environment }]} defaultProjectId={project.id} /> : undefined}
              />
            ) : (
              <div className="overflow-hidden rounded-lg border border-border bg-bg-elevated shadow-xs">
                <Table>
                  <TableHeader>
                    <TableRow className="hover:bg-transparent">
                      <TableHead>Name</TableHead>
                      <TableHead>Key</TableHead>
                      <TableHead>Mode</TableHead>
                      <TableHead>Last used</TableHead>
                      <TableHead>Status</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {keys.slice(0, 8).map((k) => (
                      <TableRow key={k.id} className={k.status !== "active" ? "text-fg-muted" : undefined}>
                        <TableCell className="font-medium text-fg">{k.name}</TableCell>
                        <TableCell>
                          <code className="font-mono text-[12.5px]">{maskedKey(k.keyPrefix, k.last4)}</code>
                        </TableCell>
                        <TableCell>
                          <Badge variant={k.mode === "live" ? "success" : "warning"}>{k.mode}</Badge>
                        </TableCell>
                        <TableCell className="tabular">{timeAgo(k.lastUsedAt)}</TableCell>
                        <TableCell>
                          <StatusBadge status={k.status} />
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
                {keys.length > 8 ? (
                  <div className="border-t border-border px-4 py-2 text-[12.5px] text-fg-muted">
                    <Link href={`/dashboard/api-keys?project=${project.id}`} className="underline-offset-4 hover:underline">
                      View all {keys.length} keys
                    </Link>
                  </div>
                ) : null}
              </div>
            )}
          </section>
        </div>

        <div className="grid gap-6 self-start">
          <Card>
            <CardHeader>
              <CardTitle>Spending limits</CardTitle>
              <CardDescription>Month-to-date against this project&apos;s limits.</CardDescription>
            </CardHeader>
            <CardContent className="grid gap-4 text-[13px]">
              <LimitRow label="Requests" value={`${formatNumber(usage.requests)} / ${requestCap < Number.MAX_SAFE_INTEGER ? formatNumber(requestCap) : "∞"}`} pct={requestPct} note={project.monthlyRequestLimit ? "project cap" : `${planLimits.label} — no monthly cap`} />
              <LimitRow label="Spend" value={`${formatUsd(usage.spendUsd)}${project.hardLimitUsd ? ` / ${formatUsd(project.hardLimitUsd)}` : ""}`} pct={spendPct} note={project.hardLimitUsd ? "hard limit" : "no hard limit"} />
              <div className="flex items-center justify-between border-t border-border pt-3 text-fg-muted">
                <span>Soft limit (alert)</span>
                <span className="font-mono tabular text-fg">{project.softLimitUsd ? formatUsd(project.softLimitUsd) : "—"}</span>
              </div>
              <p className="text-[12px] text-fg-subtle">
                Organization-wide limits live in{" "}
                <Link href="/dashboard/settings" className="underline-offset-4 hover:underline">
                  Settings
                </Link>
                .
              </p>
            </CardContent>
          </Card>

          {!archived ? (
            <Card className="border-danger/30">
              <CardHeader>
                <CardTitle className="text-danger">Danger zone</CardTitle>
                <CardDescription>Archiving hides the project and disables its keys.</CardDescription>
              </CardHeader>
              <CardContent>
                <ArchiveProjectButton projectId={project.id} name={project.name} disabled={ws.projects.length <= 1} disabledReason="You need at least one active project." />
              </CardContent>
            </Card>
          ) : null}
        </div>
      </div>
    </div>
  );
}

function LimitRow({ label, value, pct, note }: { label: string; value: string; pct: number | null; note: string }) {
  return (
    <div className="grid gap-1.5">
      <div className="flex items-center justify-between">
        <span className="text-fg-muted">{label}</span>
        <span className="font-mono tabular">{value}</span>
      </div>
      <div className="h-1.5 overflow-hidden rounded-full bg-bg-muted" role="progressbar" aria-valuenow={pct ?? undefined} aria-valuemin={0} aria-valuemax={100} aria-label={`${label} used`}>
        {pct !== null ? <div className={pct >= 90 ? "h-full bg-danger" : pct >= 70 ? "h-full bg-warning" : "h-full bg-accent"} style={{ width: `${pct}%` }} /> : null}
      </div>
      <div className="text-[11.5px] text-fg-subtle">{note}</div>
    </div>
  );
}